<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>哔哩哔哩弹幕视频网 - ( ゜- ゜)つロ 乾杯~ - bilibili</title>

 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="themes/icon.css">
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="jquery.easyui.min.js"></script>
   <script type="text/javascript">
   		//根据传入的类别和名称查询
   		function clickQuery(typename){
   		  var foodname=	$("input[name='foodname']").val();
   			$.ajax({
				url:'facetby',
				data:'foodname='+foodname+"&typename="+typename,
				dataType:'json',
				success:function(jd){
					$("div[name='c']").remove()
					for(var i=0;i<jd.length;i++){
						var html="<div name='c'>"+"<h3>"+jd[i].foodname+"("+jd[i].typename+")</h3>"+"<span>"
						+jd[i].foodname+"价格是："+jd[i].price+"</span>"+"<hr>"+"</div>";
						$("#fooddiv").append(html)
					}
				}	
			})
   		}
   		
  		 $(function(){
   			//获取文本框的坐标
   			var inputObj=$("input[name='foodname']");
   			var offset=inputObj.offset();
   			var x=offset.left;
   			var y=offset.top
   			//设计div的位置
   			var divx=x;
   			var divy=y+inputObj.height()+10;
   			$("#showF")[0].style.left=divx;
   			$("#showF")[0].style.top=divy;
   			//给文本框添加焦点事件
   			inputObj.bind("input",function(){
   				$("#showF").show();
   				//发起AJAX搜索
   				$.ajax({
   					url:'facet',
   					dateType:'json',
   					data:"foodname="+inputObj.val(),
   					success:function(data){
   						var html="";
   						for(var i=0;i<data.length;i++){
   							var map=data[i];
   							for(var key in map){
   								//key是类别
   								var value=map[key];
   								html+="<a href='javascript:clickQuery(\""+key+"\")'>"+key+"["+value+"]</a><br>";
   							}
   						}	
   						$("#showF").html(html);
   					}
   					
   				})
   			})
   			//失去焦点事件
   			 $(document).click(function(){
   				$("#showF").hide();
			  })
   			//搜索
   			$("#search").click(function(){
   				$.ajax({
   					url:'solr',
   					data:'foodname='+$("input[name='foodname']").val(),
   					dataType:'json',
   					success:function(jd){
   						$("div[name='c']").remove()
   						for(var i=0;i<jd.length;i++){
   							var html="<div name='c'>"+"<h3>"+jd[i].foodname+"("+jd[i].typename+")</h3>"+"<span>"
   							+jd[i].foodname+"价格是："+jd[i].price+"</span>"+"<hr>"+"</div>";
   							$("#fooddiv").append(html)
   						}
   					}	
   				})
   			})	
   			
   		})
   		
   </script>
</head>
<body>
	<input type="text" name="foodname" style="border:1px solid grey;width:200px;height:25px">
	<input id="search" type="button" value="觅食">
	<div id="fooddiv">
	</div>
	
	<div id="showF" style="border:1px solid black;position:absolute;width:199px ;display: none;background-color: #99CC66">
	
	</div>
	
</body>
</html>